import React from 'react';
import { Table, Button, Form, Popconfirm} from 'antd';
import GroupModify from './groupUpdate';
import GroupModelCreate from './groupCreate';

class Group extends React.Component {

  render() {

    const { groupList ,onEdit, onAdd, onDelete} = this.props;

    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
      },
      {
        title: '组名',
        dataIndex: 'groupName',
      },
      {
        title: '操作',
        key: 'operation',
        render: (text, record) => (
          <span>
          <GroupModify record={record} onOk={ (values) => {
              onEdit(values);
            }
          }>
            <a>Edit</a><br/>
          </GroupModify>

          <Popconfirm
            title="Confirm to delete?"
            onConfirm={ () => { onDelete(record.id); }}
          >
            <a href="">Delete</a>
          </Popconfirm>
        </span>
        ),
      },
    ];

    return (
      <div>
        <GroupModelCreate record={groupList} onOk={(values) => { onAdd(values);} }>
          <Button type='primary'>新建</Button>
        </GroupModelCreate>

        <Table columns={columns} dataSource={groupList} rowKey="id"
               pagination={{ pageSize: 5 } }
        />
      </div>
    );
  }

};

export default Form.create()(Group);
